<template>
  <div class="icon-selector">
    <a-input
      :value="modelValue"
      @update:value="handleInputChange"
      :placeholder="placeholder"
      readonly
      @click="showModal = true"
    >
      <template #addonAfter>
        <div class="icon-preview" @click="showModal = true">
          <component v-if="selectedIcon" :is="selectedIcon" />
          <SearchOutlined v-else />
        </div>
      </template>
    </a-input>

    <a-modal
      v-model:open="showModal"
      title="选择图标"
      width="800px"
      :footer="null"
      @cancel="showModal = false"
    >
      <div class="icon-selector-modal">
        <div class="search-box">
          <a-input v-model:value="searchKeyword" placeholder="搜索图标..." allow-clear>
            <template #prefix>
              <SearchOutlined />
            </template>
          </a-input>
          <div class="display-options">
            <a-checkbox v-model:checked="showIconNames">显示图标名称</a-checkbox>
          </div>
        </div>

        <div class="icon-categories">
          <a-tabs v-model:activeKey="activeCategory" type="card">
            <a-tab-pane v-for="category in iconCategories" :key="category.key" :tab="category.name">
              <div class="icon-grid">
                <div
                  v-for="iconName in filteredIcons[category.key]"
                  :key="iconName"
                  class="icon-item"
                  :class="{ active: modelValue === iconName }"
                  @click="selectIcon(iconName)"
                >
                  <component :is="iconMap[iconName]" />
                  <span v-if="showIconNames" class="icon-name">{{ iconName }}</span>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue'
import {
  SearchOutlined,
  HomeOutlined,
  UserOutlined,
  SettingOutlined,
  TeamOutlined,
  FileOutlined,
  DatabaseOutlined,
  ShoppingOutlined,
  DashboardOutlined,
  MenuOutlined,
  AppstoreOutlined,
  BellOutlined,
  MailOutlined,
  PhoneOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  EyeOutlined,
  DownloadOutlined,
  UploadOutlined,
  CopyOutlined,
  SaveOutlined,
  PrinterOutlined,
  ShareAltOutlined,
  FilterOutlined,
  ReloadOutlined,
  ExportOutlined,
  ImportOutlined,
  LockOutlined,
  UnlockOutlined,
  CheckOutlined,
  CloseOutlined,
  InfoCircleOutlined,
  WarningOutlined,
  ExclamationCircleOutlined,
  QuestionCircleOutlined,
  StarOutlined,
  HeartOutlined,
  LikeOutlined,
  MessageOutlined,
  CommentOutlined,
  CalendarOutlined,
  ClockCircleOutlined,
  EnvironmentOutlined,
  CarOutlined,
  ShopOutlined,
  BankOutlined,
  CreditCardOutlined,
  WalletOutlined,
  GiftOutlined,
  TrophyOutlined,
  CrownOutlined,
  RocketOutlined,
  BulbOutlined,
  ThunderboltOutlined,
  FireOutlined,
  CloudOutlined,
  ApiOutlined,
  BugOutlined,
  CodeOutlined,
  DesktopOutlined,
  MobileOutlined,
  TabletOutlined,
  WifiOutlined,
  GlobalOutlined,
  SafetyOutlined,
  SecurityScanOutlined,
  KeyOutlined,
  CameraOutlined,
  PictureOutlined,
  VideoCameraOutlined,
  AudioOutlined,
  FileTextOutlined,
  FilePdfOutlined,
  FileWordOutlined,
  FileExcelOutlined,
  FilePptOutlined,
  FileZipOutlined,
  FileImageOutlined,
  FolderOutlined,
  FolderOpenOutlined,
  CloudUploadOutlined,
  CloudDownloadOutlined,
  InboxOutlined,
  ContainerOutlined,
  BookOutlined,
  ReadOutlined,
  FormOutlined,
  OrderedListOutlined,
  UnorderedListOutlined,
  BarsOutlined,
  TableOutlined,
  BarChartOutlined,
  LineChartOutlined,
  PieChartOutlined,
  AreaChartOutlined,
  DotChartOutlined,
  StockOutlined,
  FundOutlined,
  SlackOutlined,
  TwitterOutlined,
  FacebookOutlined,
  LinkedinOutlined,
  GithubOutlined,
  WechatOutlined,
  QqOutlined,
  DingtalkOutlined,
  AlipayOutlined,
  TagOutlined,
  TagsOutlined,
  SolutionOutlined,
  ProjectOutlined,
  ApartmentOutlined,
  PaperClipOutlined,
  ScissorOutlined,
  CalculatorOutlined,
  CompassOutlined,
  ToolOutlined,
  BuildOutlined,
  ExperimentOutlined,
  BgColorsOutlined,
  FontColorsOutlined,
  FontSizeOutlined,
  BoldOutlined,
  ItalicOutlined,
  UnderlineOutlined,
  StrikethroughOutlined,
  AlignLeftOutlined,
  AlignCenterOutlined,
  AlignRightOutlined,
  BorderOutlined,
  HighlightOutlined,
  NodeIndexOutlined,
  SelectOutlined,
  PlayCircleOutlined,
  PauseCircleOutlined,
  StepBackwardOutlined,
  StepForwardOutlined,
  BackwardOutlined,
  ForwardOutlined,
  CaretLeftOutlined,
  CaretRightOutlined,
  CaretUpOutlined,
  CaretDownOutlined,
  UpOutlined,
  DownOutlined,
  LeftOutlined,
  RightOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  ArrowLeftOutlined,
  ArrowRightOutlined,
  DoubleLeftOutlined,
  DoubleRightOutlined,
  VerticalLeftOutlined,
  VerticalRightOutlined,
  VerticalAlignTopOutlined,
  VerticalAlignMiddleOutlined,
  VerticalAlignBottomOutlined,
  RotateLeftOutlined,
  RotateRightOutlined,
  ZoomInOutlined,
  ZoomOutOutlined,
  FullscreenOutlined,
  FullscreenExitOutlined,
  QuestionOutlined,
  PlusCircleOutlined,
  MinusCircleOutlined,
  InfoOutlined,
  ExclamationOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  LeftCircleOutlined,
  RightCircleOutlined,
  UpCircleOutlined,
  DownCircleOutlined,
  SwapOutlined,
  SwapLeftOutlined,
  SwapRightOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  SortAscendingOutlined,
  SortDescendingOutlined,
  InsertRowAboveOutlined,
  InsertRowBelowOutlined,
  InsertRowLeftOutlined,
  InsertRowRightOutlined,
  DeleteRowOutlined,
  DeleteColumnOutlined,
  MergeCellsOutlined,
  SplitCellsOutlined,
  SubnodeOutlined,
  SwitcherOutlined,
  TransactionOutlined,
  MonitorOutlined,
  LaptopOutlined,
} from '@ant-design/icons-vue'

export default defineComponent({
  name: 'IconSelector',
  props: {
    modelValue: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '请选择图标',
    },
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    // 响应式数据
    const showModal = ref(false)
    const searchKeyword = ref('')
    const activeCategory = ref('common')
    const showIconNames = ref(true)

    // 图标分类配置
    const iconCategories = [
      { key: 'common', name: '常用图标' },
      { key: 'navigation', name: '导航图标' },
      { key: 'action', name: '操作图标' },
      { key: 'business', name: '业务图标' },
      { key: 'file', name: '文件图标' },
      { key: 'chart', name: '图表图标' },
      { key: 'direction', name: '方向图标' },
      { key: 'social', name: '社交图标' },
      { key: 'device', name: '设备图标' },
    ]

    // 图标库
    const iconLibrary = {
      common: [
        'HomeOutlined',
        'UserOutlined',
        'SettingOutlined',
        'TeamOutlined',
        'DatabaseOutlined',
        'AppstoreOutlined',
        'DashboardOutlined',
        'MenuOutlined',
        'BellOutlined',
        'MailOutlined',
        'PhoneOutlined',
        'StarOutlined',
        'HeartOutlined',
        'LikeOutlined',
        'SearchOutlined',
        'CalendarOutlined',
        'ClockCircleOutlined',
        'EnvironmentOutlined',
        'LockOutlined',
        'UnlockOutlined',
      ],
      navigation: [
        'MenuOutlined',
        'MenuFoldOutlined',
        'MenuUnfoldOutlined',
        'AppstoreOutlined',
        'BarsOutlined',
        'UpOutlined',
        'DownOutlined',
        'LeftOutlined',
        'RightOutlined',
        'ArrowUpOutlined',
        'ArrowDownOutlined',
        'ArrowLeftOutlined',
        'ArrowRightOutlined',
        'DoubleLeftOutlined',
        'DoubleRightOutlined',
        'CaretLeftOutlined',
        'CaretRightOutlined',
        'CaretUpOutlined',
        'CaretDownOutlined',
        'SwapOutlined',
      ],
      action: [
        'PlusOutlined',
        'EditOutlined',
        'DeleteOutlined',
        'EyeOutlined',
        'DownloadOutlined',
        'UploadOutlined',
        'CopyOutlined',
        'SaveOutlined',
        'PrinterOutlined',
        'ShareAltOutlined',
        'FilterOutlined',
        'ReloadOutlined',
        'ExportOutlined',
        'ImportOutlined',
        'CheckOutlined',
        'CloseOutlined',
        'PlayCircleOutlined',
        'PauseCircleOutlined',
        'StepBackwardOutlined',
        'StepForwardOutlined',
      ],
      business: [
        'ShoppingOutlined',
        'ShopOutlined',
        'BankOutlined',
        'CreditCardOutlined',
        'WalletOutlined',
        'GiftOutlined',
        'TrophyOutlined',
        'CrownOutlined',
        'CarOutlined',
        'RocketOutlined',
        'BulbOutlined',
        'ThunderboltOutlined',
        'FireOutlined',
        'CloudOutlined',
        'SafetyOutlined',
        'SecurityScanOutlined',
        'KeyOutlined',
        'ProjectOutlined',
      ],
      file: [
        'FileOutlined',
        'FileTextOutlined',
        'FilePdfOutlined',
        'FileWordOutlined',
        'FileExcelOutlined',
        'FilePptOutlined',
        'FileZipOutlined',
        'FileImageOutlined',
        'FolderOutlined',
        'FolderOpenOutlined',
        'CloudUploadOutlined',
        'CloudDownloadOutlined',
        'InboxOutlined',
        'ContainerOutlined',
        'BookOutlined',
        'ReadOutlined',
        'FormOutlined',
        'PictureOutlined',
        'CameraOutlined',
        'VideoCameraOutlined',
      ],
      chart: [
        'BarChartOutlined',
        'LineChartOutlined',
        'PieChartOutlined',
        'AreaChartOutlined',
        'DotChartOutlined',
        'StockOutlined',
        'FundOutlined',
        'TableOutlined',
        'OrderedListOutlined',
        'UnorderedListOutlined',
        'SortAscendingOutlined',
        'SortDescendingOutlined',
        'MonitorOutlined',
      ],
      direction: [
        'UpCircleOutlined',
        'DownCircleOutlined',
        'LeftCircleOutlined',
        'RightCircleOutlined',
        'PlusCircleOutlined',
        'MinusCircleOutlined',
        'CheckCircleOutlined',
        'CloseCircleOutlined',
        'InfoCircleOutlined',
        'QuestionCircleOutlined',
        'ExclamationCircleOutlined',
        'WarningOutlined',
        'FullscreenOutlined',
        'FullscreenExitOutlined',
        'ZoomInOutlined',
        'ZoomOutOutlined',
        'RotateLeftOutlined',
        'RotateRightOutlined',
        'SwapLeftOutlined',
        'SwapRightOutlined',
      ],
      social: [
        'TwitterOutlined',
        'FacebookOutlined',
        'LinkedinOutlined',
        'GithubOutlined',
        'WechatOutlined',
        'QqOutlined',
        'DingtalkOutlined',
        'AlipayOutlined',
        'SlackOutlined',
        'MessageOutlined',
        'CommentOutlined',
        'GlobalOutlined',
        'WifiOutlined',
        'ApiOutlined',
      ],
      device: [
        'DesktopOutlined',
        'LaptopOutlined',
        'TabletOutlined',
        'MobileOutlined',
        'MonitorOutlined',
        'CameraOutlined',
        'VideoCameraOutlined',
        'AudioOutlined',
        'WifiOutlined',
      ],
    }

    // 图标映射
    const iconMap: Record<string, any> = {
      HomeOutlined,
      UserOutlined,
      SettingOutlined,
      TeamOutlined,
      FileOutlined,
      DatabaseOutlined,
      ShoppingOutlined,
      DashboardOutlined,
      MenuOutlined,
      AppstoreOutlined,
      BellOutlined,
      MailOutlined,
      PhoneOutlined,
      PlusOutlined,
      EditOutlined,
      DeleteOutlined,
      EyeOutlined,
      DownloadOutlined,
      UploadOutlined,
      CopyOutlined,
      SaveOutlined,
      PrinterOutlined,
      ShareAltOutlined,
      SearchOutlined,
      FilterOutlined,
      ReloadOutlined,
      ExportOutlined,
      ImportOutlined,
      LockOutlined,
      UnlockOutlined,
      CheckOutlined,
      CloseOutlined,
      InfoCircleOutlined,
      WarningOutlined,
      ExclamationCircleOutlined,
      QuestionCircleOutlined,
      StarOutlined,
      HeartOutlined,
      LikeOutlined,
      MessageOutlined,
      CommentOutlined,
      CalendarOutlined,
      ClockCircleOutlined,
      EnvironmentOutlined,
      CarOutlined,
      ShopOutlined,
      BankOutlined,
      CreditCardOutlined,
      WalletOutlined,
      GiftOutlined,
      TrophyOutlined,
      CrownOutlined,
      RocketOutlined,
      BulbOutlined,
      ThunderboltOutlined,
      FireOutlined,
      CloudOutlined,
      ApiOutlined,
      BugOutlined,
      CodeOutlined,
      DesktopOutlined,
      MobileOutlined,
      TabletOutlined,
      WifiOutlined,
      GlobalOutlined,
      SafetyOutlined,
      SecurityScanOutlined,
      KeyOutlined,
      CameraOutlined,
      PictureOutlined,
      VideoCameraOutlined,
      AudioOutlined,
      FileTextOutlined,
      FilePdfOutlined,
      FileWordOutlined,
      FileExcelOutlined,
      FilePptOutlined,
      FileZipOutlined,
      FileImageOutlined,
      FolderOutlined,
      FolderOpenOutlined,
      CloudUploadOutlined,
      CloudDownloadOutlined,
      InboxOutlined,
      ContainerOutlined,
      BookOutlined,
      ReadOutlined,
      FormOutlined,
      OrderedListOutlined,
      UnorderedListOutlined,
      BarsOutlined,
      TableOutlined,
      BarChartOutlined,
      LineChartOutlined,
      PieChartOutlined,
      AreaChartOutlined,
      DotChartOutlined,
      StockOutlined,
      FundOutlined,
      SlackOutlined,
      TwitterOutlined,
      FacebookOutlined,
      LinkedinOutlined,
      GithubOutlined,
      WechatOutlined,
      QqOutlined,
      DingtalkOutlined,
      AlipayOutlined,
      TagOutlined,
      TagsOutlined,
      SolutionOutlined,
      ProjectOutlined,
      ApartmentOutlined,
      PaperClipOutlined,
      ScissorOutlined,
      CalculatorOutlined,
      CompassOutlined,
      ToolOutlined,
      BuildOutlined,
      ExperimentOutlined,
      BgColorsOutlined,
      FontColorsOutlined,
      FontSizeOutlined,
      BoldOutlined,
      ItalicOutlined,
      UnderlineOutlined,
      StrikethroughOutlined,
      AlignLeftOutlined,
      AlignCenterOutlined,
      AlignRightOutlined,
      BorderOutlined,
      HighlightOutlined,
      NodeIndexOutlined,
      SelectOutlined,
      PlayCircleOutlined,
      PauseCircleOutlined,
      StepBackwardOutlined,
      StepForwardOutlined,
      BackwardOutlined,
      ForwardOutlined,
      CaretLeftOutlined,
      CaretRightOutlined,
      CaretUpOutlined,
      CaretDownOutlined,
      UpOutlined,
      DownOutlined,
      LeftOutlined,
      RightOutlined,
      ArrowUpOutlined,
      ArrowDownOutlined,
      ArrowLeftOutlined,
      ArrowRightOutlined,
      DoubleLeftOutlined,
      DoubleRightOutlined,
      VerticalLeftOutlined,
      VerticalRightOutlined,
      VerticalAlignTopOutlined,
      VerticalAlignMiddleOutlined,
      VerticalAlignBottomOutlined,
      RotateLeftOutlined,
      RotateRightOutlined,
      ZoomInOutlined,
      ZoomOutOutlined,
      FullscreenOutlined,
      FullscreenExitOutlined,
      QuestionOutlined,
      PlusCircleOutlined,
      MinusCircleOutlined,
      InfoOutlined,
      ExclamationOutlined,
      CheckCircleOutlined,
      CloseCircleOutlined,
      LeftCircleOutlined,
      RightCircleOutlined,
      UpCircleOutlined,
      DownCircleOutlined,
      SwapOutlined,
      SwapLeftOutlined,
      SwapRightOutlined,
      MenuFoldOutlined,
      MenuUnfoldOutlined,
      SortAscendingOutlined,
      SortDescendingOutlined,
      InsertRowAboveOutlined,
      InsertRowBelowOutlined,
      InsertRowLeftOutlined,
      InsertRowRightOutlined,
      DeleteRowOutlined,
      DeleteColumnOutlined,
      MergeCellsOutlined,
      SplitCellsOutlined,
      SubnodeOutlined,
      SwitcherOutlined,
      TransactionOutlined,
      MonitorOutlined,
      LaptopOutlined,
    }

    // 计算属性：当前选中的图标组件
    const selectedIcon = computed(() => {
      if (!props.modelValue) return null
      return iconMap[props.modelValue] || null
    })

    // 计算属性：过滤后的图标
    const filteredIcons = computed(() => {
      const result: Record<string, string[]> = {}

      Object.keys(iconLibrary).forEach((category) => {
        const icons = iconLibrary[category as keyof typeof iconLibrary]
        if (searchKeyword.value) {
          result[category] = icons.filter((icon) =>
            icon.toLowerCase().includes(searchKeyword.value.toLowerCase())
          )
        } else {
          result[category] = icons
        }
      })

      return result
    })

    // 处理输入框变化
    const handleInputChange = (value: string) => {
      emit('update:modelValue', value)
    }

    // 选择图标
    const selectIcon = (iconName: string) => {
      emit('update:modelValue', iconName)
      showModal.value = false
    }

    // 监听modelValue变化，清空搜索
    watch(
      () => props.modelValue,
      () => {
        searchKeyword.value = ''
      }
    )

    return {
      showModal,
      searchKeyword,
      activeCategory,
      iconCategories,
      selectedIcon,
      filteredIcons,
      handleInputChange,
      selectIcon,
      SearchOutlined,
      showIconNames,
      iconMap,
    }
  },
})
</script>

<style scoped lang="scss">
.icon-selector {
  .icon-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background-color: #f5f5f5;
    }
  }
}

.icon-selector-modal {
  .search-box {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;

    .ant-input {
      flex: 1;
    }

    .display-options {
      white-space: nowrap;
    }
  }

  .icon-categories {
    max-height: 500px;
    overflow-y: auto;
  }

  .icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 12px;
    padding: 16px 0;
  }

  .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    min-height: 80px;

    &:hover {
      border-color: #1890ff;
      background-color: #f6ffed;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
    }

    &.active {
      border-color: #1890ff;
      background-color: #e6f7ff;
      border-width: 2px;
      box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
    }

    .anticon {
      font-size: 32px;
      margin-bottom: 8px;
      color: #333;
      transition: all 0.3s;
    }

    &:hover .anticon {
      color: #1890ff;
      transform: scale(1.1);
    }

    &.active .anticon {
      color: #1890ff;
    }

    .icon-name {
      font-size: 11px;
      color: #999;
      text-align: center;
      word-break: break-all;
      line-height: 1.2;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

:deep(.ant-input-group-addon) {
  padding: 0;
}

:deep(.ant-tabs-content-holder) {
  max-height: 400px;
  overflow-y: auto;
}
</style> 